<template>
  <div class="box">
    <div class="flex">
      <div class="leftImg">
        <!-- {{list.category|CATEGORY}} -->
        <img :src="list.category|CATEGORYIMG"
             style="width: 100%;"/>
        <div class="item-choose-label"
             :class="list.category=='A'?'item-choose-label-orange':list.category=='B'?'item-choose-label-primary':list.category=='C'?'item-choose-label-green':'item-choose-label-yellow'">
          {{list.category|CATEGORY}}
        </div>
      </div>
      <div class="right">
        <el-row>
          <el-col>
            <a style="cursor: pointer;color:black;font-weight:600;font-size:20px;padding-left:20px;display: flex;"
               @click="resultDetail(list.achievementId,list.pmuc)">
              <span
                style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap !important;max-width:500px;display:inline-block">{{list.title}}</span>
              <span style="font-size:14px;"
                    v-if="list.releaseNo">（{{list.releaseNo}}）</span>
              <span style="float:right;padding-right:20px">
                <el-button
                  v-if="list.source=='0'&&(isNowDept(list.deptId)||isAdmin())"
                  class="el-icon-edit"
                  style="height: 32px;line-height: 6px;margin-left:10px"
                  @click.stop="resultEdit(list)">编辑</el-button>
              </span>
            </a>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-tag style="margin-left:20px"
                    v-if="list.areaName">{{list.areaName}}
            </el-tag>
            <el-tag style="margin-left:20px"
                    v-if="list.planningRank">{{list.planningRank|PLANNING_RANK}}
            </el-tag>
            <el-tag style="margin-left:20px"
                    v-if="list.planningLevel">{{list.planningLevel|APPROVING_AUTHORITY_LEVEL}}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20"
                  style="padding-left:20px;">
            <span> 规划编码： <span style="color:#409EFF">{{list.pmuc}}</span></span>
            <span> 发布时间：{{list.releaseDate}}</span>
            <span>申报单位：{{list.orgName}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20"
                  style="padding-left:20px;">
            <span>申批机关性质：{{list.approvingAuthorityNature|APPROVING_AUTHORITY_NATURE}}</span>
            <span>规划期限：{{list.startDate}}-{{list.endDate}}</span>
          </el-col>
        </el-row>
        <el-row>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import {getFileTypeFiles, getFileTypeFile} from '@/views/util'
  import {PROJECT_DIC} from '@/const/dict'
  import {mapGetters} from 'vuex'
  import {getUserInfo} from '@/api/login'

  export default {
    name: 'searchList',
    filters: {
      APPROVING_AUTHORITY_LEVEL(val) {
        switch (val) {
          case 'A':
            return '国家';
          case 'B':
            return '省级';
          case 'C':
            return '设区市';
          case 'D':
            return '县（市、区）';
        }
      },
      CATEGORY(val) {
        switch (val) {
          case 'A':
            return '发展规划(纲要)';
          case 'B':
            return '专项规划';
          case 'C':
            return '区域规划';
          case 'D':
            return '空间规划'
        }
      },
      CATEGORYIMG(val) {
        switch (val) {
          case 'A':
            return 'img/develop.png';
          case 'B':
            return 'img/special.png';
          case 'C':
            return 'img/area.png';
          case 'D':
            return 'img/space.png'
        }
      },
      PLANNING_RANK(val) {
        switch (val) {
          case 'A':
            return '重点';
          case 'B':
            return '一般';
          case 'C':
            return '备案'
        }
      },
      APPROVING_AUTHORITY_NATURE(val) {
        switch (val) {
          case 'A':
            return '党委';
          case 'B':
            return '人大';
          case 'C':
            return '政府';
          case 'D':
            return '发展改革部门';
          case 'E':
            return '其它部门'
        }
      }
    },
    props: {
      list: {
        type: Object
      }
    },
    data() {
      return {
        deptIdTemp: '',
      }
    },

    computed: mapGetters([
      "permissions",
      "roles",
    ]),
    beforeCreate() {
      getUserInfo().then(response => {
        this.deptIdTemp = response.data.data.sysDept.deptId
      })
    },
    methods: {
      isAdmin() {
        if (this.roles != null && this.roles.length != 0) {
          if (this.roles.indexOf(1) != -1) {
            return true;
          }
        }
      },
      isNowDept(id) {
        if (id === this.deptIdTemp) {
          return true
        } else if (id !== this.deptIdTemp) {
          return false
        }
      },
      // 成果编辑
      resultEdit(row, index) {
        let src = `/resultEdit/detail/${row.achievementId}`;
        this.$router.push({
          path: src
        })
      },
      // 成果详情跳转
      resultDetail(achievementId, pmuc) {
        let src = `/planning/achievement/detail?id=${achievementId}&pmuc=${pmuc}`;
        this.$router.push({
          path: src
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-col-2 {
    text-align: right;
  }

  .el-col-6 {
    padding-left: 10px;
  }

  .el-col {
    line-height: 32px;

    > span {
      margin-right: 16px;
    }
  }

  .box {
    padding: 20px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin-bottom: 10px;
  }

  .el-tag {
    font-size: 16px;
    font-weight: 600;
    min-height: 32px;
    height: auto;
  }

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .leftImg {
    height: 150px;
    width: 130px;
    margin-left: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
  }

  .right {
    flex-grow: 4;
  }

  .item-choose-label-orange {
    background-color: #00b7ee;
  }

  .item-choose-label-primary {
    background-color: #f65c4c;
  }

  .item-choose-label-green {
    background-color: #86d46e;
  }

  .item-choose-label-yellow {
    background-color: #f8b551;
  }

  .item-choose-label {
    border-radius: 4px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }
</style>
